<template>
  <div>
      <!-- 顶部操作 -->
      <div class="tableHead">
        <div>
          <el-button size="small" type="danger" @click="batchDelete" :disabled="batchDeleteArr.length === 0">
            <i class="el-icon-delete">
              批量删除
            </i>
          </el-button>
          <el-button size="small" @click="goBackUserList" :disabled="searchInput == ''">
            返回用户列表
          </el-button>
        </div>
          <el-row>
            <el-col>
              <el-input v-model="searchInput" placeholder="请输入搜索内容" size="small" style="width:250px"></el-input>
              <el-button @click="searchUser" size="small" type="success" icon="el-icon-search"></el-button>
            </el-col>
          </el-row>
      </div>
      <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="封禁日期"
                width="180">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 2px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                width="180">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>昵称: {{ scope.row.nickName }}</p>
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>性别: {{ scope.row.sex }}</p>
                    <p>电话: {{ scope.row.tel }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                label="封禁原因"
                width="180">
                <template slot-scope="">
                  
                  <span style="margin-left: 2px">敏感词汇</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">解封</el-button>
                </template>
              </el-table-column>
      </el-table>
      <el-pagination
          layout="prev, pager, next"
          :total="50">
      </el-pagination>
  </div>
</template>

<script>
export default {
    name:"UserClose",
    data() {
        const item = {
            date: '2022-2-5',
            nickName:'Song',
            name: '松果',
            address: '上海市普陀区金沙江路 1518 弄',
            sex:'女',
            tel:'136****0120',
        };
        return {
        name:'UserManage',
        tableData: Array(7).fill(item)
      }
    }
}
</script>

<style>
.navTab{
    height: 50px;
    border-bottom:1px solid #e6e6e6;
}
.searchInput{
    display: inline-block;
    width: 200px;
    height: 28px;
    border: 1px solid #e6e6e6;
    outline: none;
    padding-left: 5px;
    vertical-align:top;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.searchBtn{
    display: inline-block;
    width: 40px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #e6e6e6;
    vertical-align:top;
    font-size: 13px;
    cursor: pointer;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
.searchBtn:hover{
    background-color: #d9ecff;
    color: #409EFF;
}
</style>